<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <script type="application/javascript">
  function loadJSON()
  {
      var data_file = "http://www.tutorialspoint.com/json/data.json";
      var http_request = new XMLHttpRequest();
      try{
          // Opera 8.0+, Firefox, Chrome, Safari
          http_request = new XMLHttpRequest();
      }catch (e){
          // IE 浏览器处理
          try{
              http_request = new ActiveXObject("Msxml2.XMLHTTP");
          }catch (e) {
              try{
                  http_request = new ActiveXObject("Microsoft.XMLHTTP");
              }catch (e){
                  // 错误处理
                  alert("Your browser broke!");
                  return false;
              }
          }
      }
      http_request.onreadystatechange = function(){
          if (http_request.readyState == 4 )
          {
              // 使用 JSON.parse 解析 JSON 数据
              var jsonObj = JSON.parse(http_request.responseText);
              // jsonObj 变量现在包含数组结构，可以通过 jsonObj.name 和 jsonObj.country 的方式访问
              document.getElementById("Name").innerHTML = jsonObj.name;
              document.getElementById("Country").innerHTML = jsonObj.country;
          }
      }
      http_request.open("GET", data_file, true);
      http_request.send();
  }
  </script>
  <title>tutorialspoint.com JSON</title>
  </head>
  <body>
  <h1>Cricketer Details</h1>
  <table class="src">
  <tr><th>Name</th><th>Country</th></tr>
  <tr><td><div id="Name">Sachin</div></td>
  <td><div id="Country">India</div></td></tr>
  </table>
  <div class="central">
  <button type="button" onclick="loadJSON()">Update Details </button>
  </body>
  </html>